<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <Tree :node-data="data" :bool="true" />
        <hr>
        <!-- 公司树型结构 -->
        <!-- props修改el默认的label值 -->
        <!-- default-expand-all 默认打开树结构 -->
        <el-tree :data="treeData" default-expand-all :props="{label:'name'}">
          <!-- 作用域插槽 -->
          <!-- el-ul给的内部插槽没有名字有一个默认的default名字 -->
          <template #default="obj">
            <Tree :node-data="obj.data" @editDepartment="editDepartment" @addDepartment="addDepartment" @del="delDepartment" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <addDepa :show-depa="showDepa" />
  </div>
</template>

<script>
import Tree from './components/tree-tool'
import addDepa from './components/add-depa.vue'
import { getDepartment } from '@/api/department'
// 引入改造数据的函数
import { listTotreeData } from '@/utils/index'
export default {
  components: {
    Tree, addDepa
  },
  data() {
    return {
      data: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'

      },
      treeData: [],
      // 定义一个显示与隐藏的布尔值用于弹框的显示与隐藏
      showDepa: false
    }
  },
  async created() {
    // 获取公司部门数据列表
    this.delDepartment()
  },
  // 封装渲染函数
  methods: {
    async  delDepartment() {
      const { depts } = await getDepartment()
      // console.log(79, depts)
      // 保存公司部门列表数据
      // 改造数据封装一个函数
      // 传一个列表与空字符串过去筛选出顶级部门
      this.treeData = listTotreeData(depts, '')
    },
    // 添加子部门
    addDepartment() {
      // 当点击添加子部门传给父组件，父组件在修改showDepa的值传给弹框组件进行显示与隐藏
      this.showDepa = true
    },
    // 编辑子部门
    editDepartment() {
      // 当点击添加子部门传给父组件，父组件在修改showDepa的值传给弹框组件进行显示与隐藏
      this.showDepa = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;

}
</style>
